var demoModule = angular.module('demo', []);

demoModule.controller('Controller', [
  '$scope',
  '$timeout',
  function ($scope, $timeout) {
    $scope.selection = {};
    $scope.showSelect = false;
    $scope.personSearchText = "";
    $scope.atList = [
      {
        fullName: '张三'
      },
      {
        fullName: '李四'
      },
      {
        fullName: '王五'
      },
      {
        fullName: '赵六'
      },
    ];
    //输入@时，显示选择框；
    var keyup = function (e) {
      var ele = angular.element('#demoContentEditable');

      if (e.key = '@') {
        $scope.showSelect = true;
        var offset = ele.caret('offset');
        $scope.SelectPos = {
          left: offset.left + 10 + 'px',
          top: offset.top + offset.height + 'px'
        };

        $timeout(function () {
          // angular.element('#searchPersonInput')[0].focus();
        })
      }
    };

    $scope.keyup = keyup;
    //
    $scope.missFocus = function () {

    };
    //
    var clickItemHandler = function (person) {
      // 成功选择成员后，关闭选择框，让输入框获取焦点。
      $scope.showSelect = false;
      var ele = angular.element('#demoContentEditable')[0];
      ele.focus();

      // 获取之前保留先来的信息。
      // 需要修改 keyIn 的代码，保存选区以及光标信息，用于获取在光标焦点离开前，光标的位置
      var selection = getSelection();
      var range = selection.getRangeAt(0);
      var textNode = range.startContainer;

      // 删除 @ 符号。
      range.setStart(textNode, range.endOffset);
      range.setEnd(textNode, range.endOffset + 1);
      range.deleteContents();

      // 生成需要显示的内容，包括一个 span 和一个空格。
      var spanNode1 = document.createElement('span');
      var spanNode2 = document.createElement('span');
      spanNode1.className = 'atText';
      spanNode1.innerHTML = '@' + person.fullName;
      spanNode2.innerHTML = '&nbsp;';

      // 将生成内容打包放在 Fragment 中，并获取生成内容的最后一个节点，也就是空格。
      var frag = document.createDocumentFragment(),
        node, lastNode;
      frag.appendChild(spanNode1);
      while ((node = spanNode2.firstChild)) {
        // frag.appendChild()返回node；
        lastNode = frag.appendChild(node);
      }

      console.log(frag);
      console.log(lastNode);

      // 将 Fragment 中的内容放入 range 中，并将光标放在空格之后。
      range.insertNode(frag);
      selection.extend(lastNode, 1);
      selection.collapseToEnd();
    };

    $scope.clickItemHandler = clickItemHandler;

  }])
